<template>
  <div class="page">
    <div class="left">
      <p class="title-left">
        大里路警务站巡逻航线大里路警务站巡逻航线大里路警务站巡逻航线大里路警务站巡逻航线
      </p>
    </div>
    <div class="center">
      <div class="video-container">
        <div class="audio">
          <audio
            src="https://www.w3schools.com/html/mov_bbb.mp4"
            controls="controls"
            class="video"
          ></audio>
          <img src="/static/mediaList/audio/bg.png" alt="" class="bg" />
        </div>

        <div class="video-btns">
          <img
            src="/static/mediaList/video/left.png"
            class="img-center margin-right"
            alt=""
          />
          <img
            src="/static/mediaList/audio/left.png"
            class="img-center"
            alt=""
          />
          <img
            src="/static/mediaList/video/start.png"
            class="img-play"
            alt=""
          />
          <img
            src="/static/mediaList/video/right.png"
            class="img-center margin-right"
            alt=""
          />
          <img
            src="/static/mediaList/audio/right.png"
            class="img-center"
            alt=""
          />
          <img
            src="/static/mediaList/video/sound.png"
            class="img-center margin-left"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="content">
      <img
        src="/static/mediaList/video/close.png"
        alt=""
        class="close"
        @click="handleBack()"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElButton, ElInput, ElMessageBox, ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { router } from "#/router";

const drawer = ref(true);
const info = ref([
  { id: 1, img: "/static/mediaList/video/1.png", text: "35°C", name: "温度" },
  { id: 2, img: "/static/mediaList/video/2.png", text: "58%", name: "湿度" },
  { id: 3, img: "/static/mediaList/video/3.png", text: "58%", name: "降水量" },
  { id: 4, img: "/static/mediaList/video/4.png", text: "小雨", name: "天气" },
  { id: 5, img: "/static/mediaList/video/5.png", text: "3.2m/s", name: "风速" },
]);

const handleBack = () => {
  router.go(-1);
};
</script>
<style scoped lang="scss">
.page {
  width: 100%;
  height: calc(100vh - 86px);
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
}

.left {
  width: calc(100% - 1170px);
  height: 100%;
  background: #000;
}

.title-left {
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  margin-top: 66px;
  margin-left: 66px;
  padding-right: 30px;
}

.time {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.center {
  width: 900px;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio {
  position: relative;
}

.bg {
  position: absolute;
  width: 68px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video {
  width: 900px;
  height: 506px;
}

.video-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.img-center {
  width: 20px;
  height: 20px;
}

.img-play {
  width: 38px;
  height: 38px;
  margin: 0 34px;
}

.margin-left {
  margin-left: 32px;
}

.margin-right {
  margin-right: 32px;
}

.content {
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  width: 270px;
  height: 100%;
  padding-left: 18px;
  position: relative;
}

.close {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 24px;
  right: 24px;
}

@media (min-width: 1900px) {
  .left {
    width: calc(100% - 1560px);
  }

  .center {
    width: 1200px;
  }

  .content {
    width: 360px;
    padding-left: 24px;
    font-size: 14px;
  }

  .title-left {
    margin-top: 88px;
    margin-left: 88px;
    font-size: 18px;
  }

  .video {
    width: 1200px;
    height: 675px;
  }

  .time {
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }

  .video-btns {
    margin-top: 40px;
  }

  .img-center {
    width: 28px;
    height: 28px;
  }

  .img-play {
    width: 50px;
    height: 50px;
    margin: 0 46px;
  }

  .margin-left {
    margin-left: 44px;
  }

  .margin-right {
    margin-right: 44px;
  }

  .time-container {
    margin-top: 200px;
  }

  .close {
    width: 20px;
    height: 20px;
    top: 34px;
    right: 34px;
  }
}
</style>